<!--
 * @description 从图片库中选择
 * @author guojiteng
 * @date 2023/02/14
 -->
<template>
  <div class="index-page-select">
    <el-dialog
      custom-class="select-pic"
      :visible.sync="visible4Select"
      :close-on-click-modal="false"
      title="图片库1111111"
      center
      fullscreen
      :append-to-body="isAppend"
      @close="handleCancel"
    >
      <div class="dialog-container">
        <div class="file-list">
          <section class="main-search merge">
            <span class="svg-container">
              <svg-icon icon-class="search" />
            </span>
            <el-input
              v-model.trim="listQuery.pictureName"
              placeholder="输入图片名称搜索"
              class="search-input"
              @keyup.enter.native="handleFilter"
            />
            <section class="search-btn">
              <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
            </section>
          </section>
          <section class="main-table">
            <v-table
              :list="list"
              :source-arr="['imgURL']"
              tag="imgLibrary"
              :height="435"
              :list-loading="listLoading"
              :filter-column="filtercolumn"
              :selection="false"
            >
              <el-table-column label="操作" fixed="right" align="center" min-width="120" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="handleChoose(scope.row)">选择</el-button>
                </template>
              </el-table-column>
            </v-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getList"
            />
          </section>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryPage } from './api'
import Pagination from '@/components/Pagination'
import VTable from '@/components/Table'
import { fomatterTime } from '@/filters'
function conver(limit) {
  limit = Number(limit)
  var size = ''
  if (limit < 0.1 * 1024) {
    // 如果小于0.1KB转化成B
    size = limit.toFixed(2) + 'B'
  } else if (limit < 0.1 * 1024 * 1024) {
    // 如果小于0.1MB转化成KB
    size = (limit / 1024).toFixed(2) + 'KB'
  } else if (limit < 0.1 * 1024 * 1024 * 1024) {
    // 如果小于0.1GB转化成MB
    size = (limit / (1024 * 1024)).toFixed(2) + 'MB'
  } else {
    // 其他转化成GB
    size = (limit / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
  }

  var sizestr = size + ''
  var len = sizestr.indexOf('\.')
  var dec = sizestr.substr(len + 1, 2)
  if (dec === '00') {
    // 当小数点后为00时 去掉小数部分
    return sizestr.substring(0, len) + sizestr.substr(len + 3, 2)
  }
  return sizestr
}
export default {
  name: 'Index',
  components: {
    Pagination,
    VTable
  },
  inheritAttrs: false,
  props: {
    selectLimit: {
      type: Number,
      default: 1
    },
    uploadTip: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible4Select: true,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        pictureName: ''
      },
      list: [],
      total: 0,
      view: '/API-DOCUMENT/document/file/download?id=',
      isAppend: false
    }
  },
  created() {
    if (this.$route.path === '/pagemanage/config' || this.$route.path === '/contentRepository/question/questionManage') {
      this.isAppend = true
    }
    this.getList()
  },
  methods: {
    /**
     * 选择
     */
    handleChoose(item) {
      console.log('item', item)
      this.$emit('back', item)
    },
    /**
     * 关闭
     */
    handleCancel() {
      this.$emit('close')
    },

    filtercolumn(scope, item) {
      if (item === 'spaceUsage') {
        return `${conver(scope.row.spaceUsage)} `
      } else if (item === 'uploadTime') {
        return scope.row.uploadTime
      } else if (item === 'imgId') {
        return this.view + scope.row.imgId
      } else if (item === 'duration') {
        return scope.row[item] ? fomatterTime(scope.row[item]) : ''
      } else {
        return scope.row[item]
      }
    },

    handleReset() {
      this.listQuery.page = 1
      this.listQuery.pictureName = ''
      this.getList()
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    /**
     * 获取个人文件列表
     * @param obj
     * @returns {Promise<unknown>}
     */
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        pictureName: this.listQuery.pictureName
      }
      return new Promise((resolve, reject) => {
        queryPage(query).then(response => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    }
  }

}
</script>

<style lang="scss">
.v-modal{
  display: none;
}
  .select-pic {
    z-index: 999999999999;
    .dialog-container {
      height: calc(100vh - 140px);
      overflow-y: hidden;
      .classify-tab {
        width: 100%;
        margin-bottom: 10px;
        padding: 0 10px;
        background-color: #f8f8f8;
        display: flex;
        border-radius: 4px;

        .el-tabs__nav-wrap::after {
          display: none;
        }

        .el-tabs__header {
          margin: 0;
        }
      }
      .custom-upload {
        width: 800px;
        margin: 0 auto;
        .upload-btn {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px dotted $mainColor;
          color: $mainColor;
          cursor: pointer;
        }
        .custom-file-simple {
          width: 100%;
          .custom-img-container {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .custom-img {
              max-height: 300px;
              max-width: 300px;
            }
            .file-name, .file-status, .el-button {
              margin-left: 10px;
            }
          }
          .custom-file-container{
            .el-col {
              padding: 10px 5px;
              &.title {
                background-color: #f8f8f8;
              }
              .el-button {
                padding: 0;
              }
              .el-button+.el-button {
                margin-left: 5px;
              }
            }
          }
        }
        .custom-file-multi {
          margin-top: 10px;
        }
      }

      .file-list {
        .main-search {
          background-color: #fff;
          padding: 0 10px;
          .svg-container {
            padding: 0 5px 0 10px;
            color: #bfced6;
            vertical-align: middle;
            display: inline-block;
          }
          .search-input {
            width: 60%;
            position: relative;
            &:after {
              content: '';
              position: absolute;
              left: -25px;
              right: 0;
              bottom: 8px;
              height: 1px;
              background: rgba(226, 227, 232, 1);
            }
            input {
              outline: none;
              background: transparent;
              border: none;
              outline: medium;
              padding: 0;
              &:focus {
                outline: none;
                background-color: transparent;
              }
            }
          }
          .search-btn {
            display: inline-block;
            float: right;
            .el-button.is-round {
              padding: 10px 30px;
              margin-right: 34px;
            }
            .search-more {
              font-size: 14px;
              font-weight: 500;
              @include font-color($mainColor);
              cursor: pointer;
              margin-left: 10px;
            }
          }

          &.merge {
            height: 50px;
            line-height: 50px;
          }

        }
        .main-table{
          height: 435px;
          .table-container{
            height: 100%;
            width: 100%;
            .el-table{
              height: 100% !important ;
              width: 100%;
              overflow: auto;
            }
          }
          .pagination-container{
            margin-bottom: 300px;
          }

        }

      }
    }
    .el-dialog__footer {
      width: 100%;
      height: 50px;
      padding-bottom: 0!important;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
